<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>Untitled Document</title>
        <script type="text/javascript" src="../../js/jquery/jquery.js">
        </script>
        <script type="text/javascript" src="../../js/jquery/jquery-migrate.js">
        </script>
        <script type="text/javascript" src="../../js/jqueryui/jquery-ui.js">
        </script>		
		<script type="text/javascript" src="../../js/ctp/public/jsextend.js">
        </script>
        <script type='text/javascript' src='../../js/ctp/public/ctp.core.js'></script>
		<script type='text/javascript' src='../../js/ctp/public/ctp.base.js'></script>
		<script type='text/javascript' src='../../js/ctp/public/ctp.ui.component.js'></script>
		   
        <script type="text/javascript" src="../../js/ctp/panel/ctp.ui.panel.js">
        </script>
        <script type="text/javascript" src="../../js/ctp/checkbox/ctp.ui.checkbox.js">
        </script>
		<script type="text/javascript" src="../../js/ctp/button/ctp.ui.button.js">
        </script>
		<script type="text/javascript" src="../../js/ctp/groupbox/ctp.ui.groupbox.js">
		</script>
		<script type="text/javascript" src="../../js/ctp/gridlayout/ctp.ui.gridlayout.js">
        </script>	
		<script type="text/javascript" src="../../js/ctp/messagebox/ctp.ui.messagebox.js">
		</script>
		 <script type="text/javascript" src="../../js/ctp/validator/ctp.validator.js">
        </script>
        <script type="text/javascript" src="../../js/ctp/validator/ctp.validator-rules.js">
        </script>	
		<link href="../../css/skins/standard/ctp-common.css" rel="stylesheet" type="text/css"/>		
        <link href="../../css/panel.css" rel="stylesheet" type="text/css"/>
        <link href="../../css/checkbox.css" rel="stylesheet" type="text/css"/>
        <link href="../../css/button.css" rel="stylesheet" type="text/css"/>		
		<link href="../../css/groupbox.css" rel="stylesheet" type="text/css"/>
		<link href="../../css/gridlayout.css" rel="stylesheet" type="text/css"/>
		<link href="../../css/messagebox.css" rel="stylesheet" type="text/css"/>
		<link href="../../css/validator.css" rel="stylesheet" type="text/css"/>
        <script>
            //var CTP_DEBUG = true;
			//ctp.core.log.lvl=ctp.core.loglvl.info;
            var checkbox1;
			$(document).ready(
				function(){
				
				 checkbox1=new ctp.ui.checkbox({
			  	    id: 'checkbox1',
			  	    label: 'checkbox测试 ', 
					width:'100%',
			     	value: 'checkbox1',
					validate: 'rules[required]',
			     	checked: false,
					disabled: false			   
			     });
 				var button1=new ctp.ui.button({
                    id: 'button1',
                    text: '禁用checkbox',
                    width: '100%',
                    onClick: function(){
                        checkbox1.setDisable(true);    
                    }
                });  
				 var button2=new ctp.ui.button({
                    id: 'button2',
                    text: '启用checkbox',
                    width: '100%',
                    onClick: function(){
                        checkbox1.setDisable(false);    
                    }
                });  
				 var button3=new ctp.ui.button({
                    id: 'button3',
                    text: '是否可用',
                    width: '100%',
                    onClick: function(){
						ctpMSB.alert({title:'信息提示',message:checkbox1.isDisable()?"不可用":"可用"});  
                    }
                });  
				 var button4=new ctp.ui.button({
                    id: 'button4',
                    text: '选择checkbox',
                    width: '100%',
                    onClick: function(){
                        checkbox1.setChecked(true);
                    }
                });
				 var button5=new ctp.ui.button({
                    id: 'button5',
                    text: '取消checkbox选择',
                    width: '100%',
                    onClick: function(){
                       checkbox1.setChecked(false);
                    }
                });  
				 var button6=new ctp.ui.button({
                    id: 'button6',
                    text: '是否被选择',
                    width: '100%',
                    onClick: function(){
                       ctpMSB.alert({title:'信息提示',message:checkbox1.isChecked()?"被选择":"未被选择"});  
                    }
                });
				 var button7=new ctp.ui.button({
                    id: 'button7',
                    text: '设置checkbox值为test',
                    width: '100%',
                    onClick: function(){
                       checkbox1.setValue('test');   
                    }
                });  
				 var button8=new ctp.ui.button({
                    id: 'button8',
                    text: '获取checkbox的值',
                    width: '100%',
                    onClick: function(){
                         ctpMSB.alert({title: '信息提示',message: checkbox1.getValue()}); 
                    }
                }); 
				var button9=new ctp.ui.button({
                    id: 'button9',
                    text: '还原checkbox的值',
                    width: '100%',
                    onClick: function(){
                         checkbox1.setValue('checkbox');   
                    }
                }); 
				var button10=new ctp.ui.button({
                    id: 'button10',
                    text: '设置文本为test',
                    width: '100%',
                    onClick: function(){
                       checkbox1.setLabel('test');
                    }
                });
				var button11=new ctp.ui.button({
                    id: 'button11',
                    text: '取得文本',
                    width: '100%',
                    onClick: function(){
                       ctpMSB.alert({title: '信息提示',message: checkbox1.getLabel()});
                    }
                });
				var button12=new ctp.ui.button({
                    id: 'button12',
                    text: '还原文本',
                    width: '100%',
                    onClick: function(){
                      checkbox1.setLabel('checkbox测试');
                    }
                });
				 var button13=new ctp.ui.button({
                    id: 'button13',
                    text: '隐藏组件',
                    width: '100%',
                    onClick: function(){
                       checkbox1.hide();    
                    }
                });
				 var button14=new ctp.ui.button({
                    id: 'button14',
                    text: '显示组件',
                    width: '100%',
                    onClick: function(){
                      checkbox1.show();   
                    }
                }); 	
			
				var button15=new ctp.ui.button({
                    id: 'button15',
                    text: '取得外层jq对象',
                    width: '100%',
                    onClick: function(){
                       ctpMSB.alert({title: '信息提示',message: checkbox1.getJqDom().get()});  
                    }
                });
				var button16=new ctp.ui.button({
                    id: 'button16',
                    text: '设置组件宽度300px',
                    width: '100%',
                    onClick: function(){
                      checkbox1.setWidth('300px');
                    }
                });
				 var button17=new ctp.ui.button({
                    id: 'button17',
                    text: '获取checkbox的ID',
                    width: '100%',
                    onClick: function(){
                        ctpMSB.alert({title: '信息提示',message:checkbox1.getId()}); 
                    }
                });
				 var button18=new ctp.ui.button({
                    id: 'button18',
                    text: '触发onchange函数',
                    width: '100%',
                    onClick: function(){
                       checkbox1.onChange(
					   		function(){
								ctpMSB.alert({title:'信息提示',message:checkbox1.isChecked()?"被选择":"未被选择"});    
							}
						)    
                    }
                }); 
				var button19=new ctp.ui.button({
                    id: 'button19',
                    text: '删除组件',
                    width: '100%',
                    onClick: function(){
                         checkbox1.remove();   
                    }
                }); 				
								
				 var showLayout = new ctp.ui.gridlayout({
					id:'showLayout',
                    width: '80%',
                    cols: 1,
                    align: 'center',
                    colSpace: 30,
                    items: [[{element: checkbox1}]]
                
                });  
				var showGroupbox=new ctp.ui.groupbox({
			  	    id: 'showGroupbox',						
					items:[showLayout],
					title:'效果展示区'						   
			     });
				var buttonsLayout = new ctp.ui.gridlayout({
					id:'buttonsLayout',
                    width: '98%',
                    cols: 3,
                    align: 'center',
                    colSpace: 30,
                    items: [
						[{element: button1},{element: button2},{element: button3}],
						[{element: button4},{element: button5},{element: button6}],
						[{element: button7},{element: button8},{element: button9}],
						[{element: button10},{element: button11},{element: button12}],
						[{element: button13},{element: button14},{element: button15}],
						[{element: button16},{element: button17},{element: button18}],
						[{element: button19}]				     
					]
                
                }); 
				var buttonsGroupbox=new ctp.ui.groupbox({
			  	    id: 'buttonsGroupbox',						
					items:[buttonsLayout],
					width:'100%',
					title:'功能测试区'						   
			     });
				new ctp.ui.panel({
                    title: 'ctp.ui.checkbox实例',
                    collapsible: true,
                    width: '550px',
                    height: 'auto',
					align:'center',
					items:[showGroupbox,buttonsGroupbox],
                    renderTo: 'body'
                });     
				 var validator = new ctp.validator({id:'validator',target:checkbox1});
               }	
			  
			);
			function removefunc(tp){
				if(tp=='ok'){
					checkbox1.remove();
				}
				else if(tp=='cancel'){
					ctpMSB.close();   
				}
				else if(tp=='close'){
					ctpMSB.close();   
				}
			}

        </script>
    </head>
    <BODY>
    	<b>ctp.ui.checkbox实例</b><hr/><br/>
		<div id="checkboxID">           		   
        </div> 

		
</BODY>
</html>